<template>
	<view>
		<view class="list">
			<view class="list1">
				<navigator url="../re_alumni/re_alumni">
					<view class="tu" @click="byType(1)">
						<view class="tex1">地方校友会</view>
						<image class="img" src="../../static/images/dongtai.png" style="width: 80rpx; height: 80rpx"></image>
					</view>
				</navigator>
				<view class="list2">
					<view class="tu" @click="byType(2)">
						<view class="tex1">院系校友会</view>
						<image class="img" src="../../static/images/community.png" style="width: 65rpx; height: 65rpx"></image>
					</view>
				</view>
			</view>
			<view class="list1">
				<view class="tu" @click="byType(0)">
					<view class="tex1">行业校友会</view>
					<image class="img" src="../../static/images/industry.png" style="width: 65rpx; height: 65rpx"></image>
				</view>
			</view>
		</view>
		<view v-if="join !==undefined && join.length > 0">
			<view class="tab" v-for="(item,index) in join" :key="index">
				<view class="name">{{item.name}}
					<image class="im" src="../../static/images/more.png" style="width: 35rpx; height: 35rpx;"></image>
				</view>

				<view class="name1" v-if="item.type===1">类型：地方校友会</view>
				<view class="name1" v-else-if="item.type===0">类型：行业校友会</view>
				<view class="name1" v-else>类型：院系校友会</view>
				<view class="de">
					<view class="name1">创建时间：{{toDate(item.create_time)}}</view>
					<view class="name2">创始人：{{item.user_name}}</view>
				</view>
			</view>
		</view>
		<view v-else>
			<view>
				<view class="nothing">{{message}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				join: [],
				id: 1,
				size: 10,
				page: 0,
				type: -1,
				message: '暂无已加入校友会'
			}
		},
		onLoad() {
			uni.request({
					url: getApp().globalData.URL + 'associationUserInfo/query?page=' + this.page + '&size=' + this.size + '&userId=' +
						this.id,
					method: 'GET'
				})
				.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
					var [error, res] = data;
					console.log("成功连接!!");
					this.join = res.data;
					console.log(this.join);
				})
		},
		onReachBottom: function() { //当划到最底部的时候触发事件
			console.log("我是最底部了");
			if (this.type === -1) {
				this.getMoreNews(); //到底之后会触发getMoreNews()函数;
			} else {
				console.log("222")
				this.getMoreNewsByType();
			}
		},
		methods: {
			byType: function(type) {
				console.log(type);
				this.page = 0;
				this.type = type;
				uni.request({
						url: getApp().globalData.URL + 'associationUserInfo/queryType?userId=' + this.id + '&page=' + this.page +
							'&size=' + this.size + '&type=' + this.type,
						method: 'GET'
					})
					.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res] = data;
						console.log("成功连接!!");
						this.join = res.data;
						console.log(this.join);
					})
			},
			toDate: function(time) {
				let date = new Date(time); //获取一个时间对象
				let dateString = date.getFullYear() + '-' + (parseInt(date.getMonth()) + 1) + '-' + date.getDate();
				//console.log(dateString)
				return dateString;
			},
			getMoreNews: function() { //数据到底,触发这个函数
				this.page = this.page + 1
				uni.showNavigationBarLoading(); //一读取数据,就进行刷新
				uni.request({
						url: getApp().globalData.URL + 'associationUserInfo/query?page=' + this.page + '&size=' + this.size +
							'&userId=' + this.id,
						method: 'GET'
					})
					.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res] = data;
						console.log("成功连接!!");
						console.log(this.page);
						console.log("成功连接!!");
						if (res.data == 0) {
							this.page = this.page - 1
							uni.stopPullDownRefresh(); //数据加载完成,刷新结束
							uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止
							return false;
						}
						this.join = this.join.concat(res.data)
						console.log(this.join);
						uni.stopPullDownRefresh(); //数据加载完成,刷新结束
						uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止

					});
			},
			getMoreNewsByType: function() {
				console.log(this.page);
				this.page = this.page + 1
				uni.showNavigationBarLoading(); //一读取数据,就进行刷新
				uni.request({
						url: getApp().globalData.URL + 'associationUserInfo/queryType?userId=' + this.id + '&page=' + this.page +
							'&size=' + this.size + '&type=' + this.type,
						method: 'GET'
					})
					.then(data => { //data为一个数组，数组第一项为错误信息，第二项为返回数据
						var [error, res] = data;
						console.log("成功连接!!");
						console.log(this.page);
						console.log("成功连接!!");
						if (res.data == 0) {
							this.page = this.page - 1
							uni.stopPullDownRefresh(); //数据加载完成,刷新结束
							uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止
							return false;
						}
						this.join = this.join.concat(res.data)
						console.log(this.join);
						uni.stopPullDownRefresh(); //数据加载完成,刷新结束
						uni.hideNavigationBarLoading(); //数据读取完毕,刷新停止

					});
			}
		},
	}
</script>

<style>
	.nothing {
		text-align: center;
	}

	.list {
		display: flex;
		margin-top: 20rpx;
		/* margin: 30rpx 30rpx; */
		margin-left: 45rpx;
	}

	.list1 {
		/* display: flex; */
		margin-top: 20rpx;
		/* margin: 30rpx ; */
	}

	.list2 {
		margin-top: 50rpx;
		/* margin: 30rpx ; */
		margin-left: 100rpx;
	}

	.tu {
		height: 80rpx;
		width: 250rpx;
		border: 1rpx solid #007AFF;
		display: flex;
		border-radius: 30rpx;
		font-size: 30rpx;
		margin-top: 20rpx;
		align-items: center;
		box-shadow: 2px 2rpx 6rpx 2rpx #007AFF;
		text-align: center;
		color: #007AFF;

	}

	.img {
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.im {
		margin-left: 650rpx;
		top: -60rpx;
	}

	.table {
		/* display: flex; */
	}

	.de {
		display: flex;
	}

	.tex1 {
		margin-left: 10rpx;
	}

	.tab {
		height: 230rpx;
		width: 95%;
		margin-top: 40rpx;
		/* background-color: #F8F8F8; */
		margin-left: 20rpx;
		border-radius: 10rpx;
		border: 1rpx solid #D6D4D4;
	}

	.name {
		text-align: left;
		margin-left: 10rpx;
		margin-top: 25rpx;
	}

	.name1 {
		font-size: 28rpx;
		margin-left: 10rpx;
		margin-top: 5rpx;
		color: #636363;
	}

	.name2 {
		font-size: 28rpx;
		margin-left: 160rpx;
		margin-top: 5rpx;
		color: #636363;
	}
</style>
